<template lang="pug">
.view.cp-product-man-definition.fix-flex-pos
  .list-detail-wrap
    ProductList(@change="changeProduct")
    ProductDetail(
      :loading="detailLoading",
      :detail="prodcutDetail",
      style="margin-top: 12px")
  .struct-wrap
    ProductStruct(
      :loading="structLoading",
      :tree="productStruct",
      @submit="submitStruct")
</template>

<script>
import ProductData from '@/data/product';
import ProductList from '@/components/manage/product/ProductList';
import ProductDetail from '@/components/manage/product/ProductDetail';
import ProductStruct from '@/components/manage/product/ProductStruct';

export default {
  name: 'prodefinition',
  components: {
    ProductList,
    ProductDetail,
    ProductStruct
  },
  data() {
    return {
      highLghtId: null,
      prodcutDetail: [],
      detailLoading: true,
      productStruct: [{
        id: '1',
        label: '产品结构',
        children: []
      }],
      structLoading: true
    };
  },
  methods: {
    changeProduct (productId) {
      this.highLghtId = productId;
      this.detailLoading = true;
      this.structLoading = true;
      setTimeout(() => {
        //
        this.prodcutDetail = ProductData.productDetail;
        this.detailLoading = false;
        //
        this.productStruct = [{
          id: '1',
          label: '产品名称',
          children: [{
            id: '1-1',
            label: '一级子系统A',
            children: [{
              id: '1-1-1',
              label: '二级子系统A1'
            }]
          }, {
            id: '1-2',
            label: '一级子系统B',
            children: [{
              id: '1-2-1',
              label: '二级子系统B1'
            }, {
              id: '1-2-2',
              label: '二级子系统B1'
            }]
          }]
        }];
        this.structLoading = false;
      }, 1000);
    },
    submitStruct () {
      console.log(this.highLghtId);
      console.log(JSON.stringify(this.productStruct));
    }
  },
  beforeRouteEnter (to, from, next) {
    next();
  },
  created () {
  },
  mounted () {
  }
};
</script>

<style lang="sass">
@import "../../../../styles/utils"
$ROLEWIDTH: 320px
$PADDINGWIDTH: 16px
$TABHEIGHT: 40px
.cp-product-man-definition
  .list-detail-wrap
    position: absolute
    top: $PADDINGWIDTH
    bottom: $PADDINGWIDTH
    left: $PADDINGWIDTH
    width: $ROLEWIDTH
    // border: 1px solid gray
    overflow-x: hidden
    overflow-y: auto
  .struct-wrap
    position: absolute
    top: $PADDINGWIDTH
    bottom: $PADDINGWIDTH
    left: $ROLEWIDTH + 32px
    right: $PADDINGWIDTH
    // border: 1px solid gray
    background: white
    overflow-x: hidden
    overflow-y: auto
</style>
